<template>
  <div class="page-order-list">
    <scroll-view class="data-container" scroll-y>
      <div class="order-wrap" @click="toDetail(data)" v-for="(data,index) in dataList" :key="index">
        <div class="order-no">
          订单号:{{data.order_no}}
        </div>
        <div class="goods-name">{{data.goods_name}}</div>
        <ul class="info-list">
          <li class="info">
            <div class="title">用户姓名:</div>
            <div class="value">{{data.real_name}}</div>
          </li>
          <li class="info">
            <div class="title">用户电话:</div>
            <div class="value">{{data.mobile}}</div>
          </li>
          <li class="info">
            <div class="title">录单人员:</div>
            <div class="value">{{data.sale_user_name}}</div>
          </li>
          <li class="info">
            <div class="title">是否延迟发货:</div>
            <div class="value">{{data.is_delay_shipping === 1 ? '是' : '否'}}</div>
          </li>
        </ul>
        <ul class="order-footer">
          <li class="btn btn-danger" @click.stop="toCheckResult(data,false)">不通过</li>
          <li class="btn btn-active"  @click.stop="toCheckResult(data, true)">通过</li>
        </ul>
      </div>
    </scroll-view>
    <div class="result-wrap" v-if="showPassDialog">
      <div class="result-body">
        <div class="result-title">审核通过</div>
        <textarea v-model="passRemark" placeholder="请填写备注"/>
        <div class="btn-list">
          <div class="btn" @click="showPassDialog = false;">取消</div>
          <div class="btn btn-active" @click="toPass">确定</div>
        </div>
      </div>
    </div>
    <div class="result-wrap" v-if="showFailDialog">
      <div class="result-body">
        <div class="result-title">审核不通过</div>
        <textarea v-model="failRemark" placeholder="请填写原因"/>
        <div class="btn-list">
          <div class="btn" @click="showFailDialog = false;">取消</div>
          <div class="btn btn-active" @click="toRefund">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import orderStatus from 'utils/order-status'

  export default {
    data() {
      return {
        dataList: [],
        showPassDialog: false,
        showFailDialog: false,
        failRemark: '',
        passRemark: '',
      };
    },
    components: {},
    methods: {
      async toPass(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/status/verify',
          data: {
            orderId: this.orderInfo.order_id,
            remark: this.passRemark,
            attach: '',
            servicerIds: '',
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showPassDialog = false;
                this.loadData();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      async toRefund(){
        wx.showLoading();
        const result = await wx.request({
          method: 'POST',
          url: '/bg/order/status/cancel',
          data: {
            orderId: this.orderInfo.order_id,
            remark: this.failRemark || '',
            refundFlag: 0
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          this.showFailDialog = false;
          wx.showModal({
            content: '操作成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                this.showFailDialog = false;
                this.loadData();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      toCheckResult(data, flag){
        this.orderInfo = data;
        if(flag){
          this.showPassDialog = true;
        }else{
          this.showFailDialog = true;
        }
      },
      toDetail(data) {
        wx.navigateTo({
          url: "/pages/order-detail/main?id=" + data.order_id
        });
      },
      async loadData() {
        wx.showLoading();
        const result = await wx.request({
          url: '/bg/orderVerify/myList',
          data: {
            page: 1,
            pageSize: 100,
            status: 0,
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            if(data.order_status < 8){
              const finalData = _.pick(data, ['order_id', 'order_no', 'goods_name', 'real_name', 'mobile', 'is_delay_shipping', 'sale_user_name', 'order_status']);
              finalData.order_status = orderStatus(finalData.order_status);
              list.push(finalData)
            }
          });
          this.dataList = list;
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async onShareAppMessage(){
      await this.loadData();
      wx.stopPullDownRefresh();
    },
    async onShow() {
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";
  .page-order-list {}
  .search-container {
    @include middle-center-x();
    top: 0;
    display: flex;
    align-items: center;
    width: pxToRem(750);
    height: pxToRem(120);
    padding: pxToRem(26) pxToRem(40);
    background-color: #F5F5F5;
    input {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      margin-right: pxToRem(40);
      width: pxToRem(528);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(24);
      color: $main-color;
      background-color: #fff;
      border-radius: pxToRem(44);
    }
    .placeholder {
      color: #A7E2FD;
    }
    .btn-search {
      height: pxToRem(52);
      line-height: pxToRem(52);
      width: pxToRem(96);
      text-align: right;
      border-left: pxToRem(2) solid #E0E0E0;
      font-size: pxToRem(28);
      color: #44BDF5;
    }
  }

  .data-container {
    height: 100vh;
    width: pxToRem(750);
    box-sizing: border-box;
    padding-top: pxToRem(20);
    background-color: #F5F5F5;
    .order-wrap {
      margin-bottom: pxToRem(20);
      background-color: #fff;
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .order-no {
        position: relative;
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(20);
        border-bottom: pxToRem(1) solid rgba(68,189,245,0.3);
        font-size: pxToRem(26);
        color: #707070;
        background-color: #fff;
        .btn-check {
          position: absolute;
          right: 0;
          top: pxToRem(20);
          background:linear-gradient(180deg, #75e4fc 0%, #44bdf5 100%);
          color:#fff;
          border:none;
          padding: pxToRem(10) pxToRem(20);
          border-radius: pxToRem(8);
        }
      }
      .goods-name {
        padding-top: pxToRem(30);
        padding-bottom: pxToRem(20);
        font-size: pxToRem(28);
        line-height: pxToRem(40);
        @include multi-ellipsis();
      }
    }
    .info-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .info {
        width: pxToRem(340);
        padding-left: 0;
        &.block {
          width: pxToRem(690);
        }
      }
    }
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(30);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      padding-bottom: pxToRem(20);
      background-color: #fff;
      .title {
        margin-right: pxToRem(10);
        color: #707070;
        &.block {
          margin-bottom: pxToRem(10);
          width: 100%;
        }
      }
      .value {
        color: #000;
        margin-right: pxToRem(30);
      }
    }
    .order-footer {
      display: flex;
      align-items: center;
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(30);
      .btn {
        flex: 1;
        height: pxToRem(88);
        line-height: pxToRem(88);
        text-align: center;
        font-size: pxToRem(36);
        border: pxToRem(1) solid #9B9B9B;
        color: #9B9B9B;
        border-radius: pxToRem(8);
      }
      .btn-danger {
        margin-right: pxToRem(50);
        color: #FF6752;
        border-color: #FF6752;
      }
      .btn-active {
        background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
        color: #fff;
        border: none;
      }
    }
  }
  .result-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    .result-body {
      @include middle-center();
      width: pxToRem(670);
      background-color: #fff;
      padding-top: pxToRem(30);
      padding-left: pxToRem(30);
      padding-right: pxToRem(30);
      .result-title {
        padding: pxToRem(30);
        font-size: pxToRem(40);
        color: #4A4A4A;
        text-align: center;
      }
      textarea {
        display: block;
        width: 100%;
        padding: pxToRem(20);
        height: pxToRem(140);
        line-height: 1.4;
        font-size: pxToRem(28);
        border: pxToRem(1) solid #44BDF5;
        border-radius: pxToRem(10);
        box-sizing: border-box;
      }
      .radio-group, input {
        padding-left: pxToRem(200);
      }
      .btn-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: pxToRem(30);
        padding: pxToRem(30) pxToRem(10);
        background-color: #fff;
        .btn {
          width: pxToRem(260);
          height: pxToRem(88);
          line-height: pxToRem(88);
          text-align: center;
          font-size: pxToRem(36);
          border: pxToRem(1) solid #9B9B9B;
          color: #9B9B9B;
          border-radius: pxToRem(8);
        }
        .btn-danger {
          color: #FF6752;
          border-color: #FF6752;
        }
        .btn-active {
          background:linear-gradient(180deg,rgba(117,228,252,1) 0%,rgba(68,189,245,1) 100%);
          color: #fff;
          border: none;
        }
      }
    }
  }
</style>
